<template>
  <view class="compare-box">
    <button
      :class="checked === '大于' ? 'active' : 'item'"
      @click="checked = '大于'"
    >
      大于
    </button>
    <button
      :class="checked === '小于' ? 'active' : 'item'"
      @click="checked = '小于'"
    >
      小于
    </button>
    <button class="item" @click="ok">确定</button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const emits = defineEmits(['clear', 'ok'])

const checked = ref('')

const ok = () => {
  emits('ok', checked.value)
  checked.value = ''
}
</script>
<style lang="scss" scoped>
.compare-box {
  width: 100%;
  height: auto;
  background-color: #fff;
  margin-bottom: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .item {
    width: 300rpx;
    margin: 30rpx 0;
    background-color: #367cf1;
    color: #fff;
  }
  .active {
    width: 300rpx;
    margin: 30rpx 0;
    background-color: #00b26a;
    color: #fff;
  }
}
</style>
